import React, {PureComponent} from 'react';
import {ScrollView, Text, TouchableWithoutFeedback, View, StyleSheet} from "react-native";
import data from './tabsData.json'
import {WithTheme, ThemeContext} from "../style/themes";
import defaultStyle from './style'

class TabHeader extends PureComponent {

  static contextType = ThemeContext

  render() {
    return (
      <ScrollView horizontal
                  directionalLockEnabled
                  showsHorizontalScrollIndicator={false}

      >
        {
          data.tabs.map((v, i) => {
            return (
              <TabHeaderItem key={i} title={v.title}></TabHeaderItem>
            )
          })
        }
      </ScrollView>
    )
  }
}

const TabHeaderItem = ({title = "", style}) => {
  return (
    <WithTheme themeStyles={defaultStyle} style={style}>
      {
        theme =>
          <View style={{marginVertical: 10, marginLeft: 15}}>
            <Text style={{...theme.tabItemStyle}}>{title}</Text>
            <Line style={[{...theme.tabUnderLine}]}/>
          </View>
      }
    </WithTheme>
  )
}

const Line = ({styles}) => {
  return (
    <View style={styles}></View>
  )
}

const styles = StyleSheet.create({
  underline: {
    height: 2,
    backgroundColor: '#f00',
    flexDirection: 'column'
  }
})

export default TabHeader;
